<template>
  <div class="home">
    <van-row class="g-header">
      <van-col span="3" offset="1" class="u-icon">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col span="16">
        <div class="m-search">
          <input type="text" class="u-input" placeholder="请输入搜索信息" />
        </div>
      </van-col>
      <van-col span="4" class="u-icon">附近<van-icon name="arrow" /></van-col>
    </van-row>
    <van-row>
      <van-col span="24" >
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
          <van-swipe-item>
            <van-image
              src="http://localhost:8080/imgs/index/c1.jpg"
              lazy-load
              class="u-banner"
            ></van-image>
          </van-swipe-item>
          <van-swipe-item>
            <van-image
              src="http://localhost:8080/imgs/index/c2.jpg"
              lazy-load
              class="u-banner"
            ></van-image>
          </van-swipe-item>
          <van-swipe-item>
            <van-image
              src="http://localhost:8080/imgs/index/c3.jpg"
              lazy-load
              class="u-banner"
            ></van-image>
          </van-swipe-item>
          <van-swipe-item>
            <van-image
              src="http://localhost:8080/imgs/index/c4.jpg"
              lazy-load
              class="u-banner"
            ></van-image>
          </van-swipe-item>
        </van-swipe>
      </van-col>
    </van-row>
    <van-grid class="list-img"> 
      <van-grid-item v-for="item,index in gridData" :key="item.id">
        <router-link :to='"/detail/"+item.id'>
          <van-image :src="item.pic" lazy-load></van-image>
          <span>{{item.title}}</span>
        </router-link>
      </van-grid-item>
    </van-grid>
 <van-tabs v-model="active">
  <van-tab >
    <template #title> 分类<van-icon name="arrow-down" /> </template>
    <div>
      <van-card
          title="江户前寿司"
          thumb="http://localhost:8080/imgs/index/a1.png"
        >
          <template #tags>
            <van-rate
              v-model="value"
              :size="10"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <span>4.8分</span>
            <div>
              <van-icon name="hot-o" class="icon"/>
              <span>匠心精做海鲜豪华刺身拼盘</span>
            </div>
            <div>
              <van-icon name="gift-o"  class="icon" />
              <span>日本料理</span>
              <van-icon name="manager-o"  class="icon"/>
              <span>34</span>
              <span>/人</span>
            </div>
            <div>
              <van-icon name="location-o"  class="icon" />
              <span>崇文门 < 113m</span>
            </div>
          </template>
        </van-card>
        <van-card
          title="江户前寿司"
          thumb="http://localhost:8080/imgs/index/a1.png"
        >
          <template #tags>
            <van-rate
              v-model="value"
              :size="10"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <span>4.8分</span>
            <div>
              <van-icon name="hot-o" class="icon"/>
              <span>匠心精做海鲜豪华刺身拼盘</span>
            </div>
            <div>
              <van-icon name="gift-o"  class="icon" />
              <span>日本料理</span>
              <van-icon name="manager-o"  class="icon"/>
              <span>34</span>
              <span>/人</span>
            </div>
            <div>
              <van-icon name="location-o"  class="icon" />
              <span>崇文门 < 113m</span>
            </div>
          </template>
        </van-card>
    </div>
  </van-tab>
  <van-tab >
    <template #title> 区域<van-icon name="arrow-down" /> </template>
    <div>分类内容2</div>
  </van-tab>
  <van-tab >
    <template #title> 排序<van-icon name="arrow-down" /> </template>
    <div>分类内容3</div>
  </van-tab>
  <van-tab >
    <template #title> 筛选<van-icon name="arrow-down" /> </template>
    <div>分类内容4</div>
  </van-tab>
</van-tabs>

  </div>
</template>
<script>
import { Tab, Tabs } from 'vant';
export default {
  name: "Home",
  data(){
    return{
      gridData:[
        {id:1,title:"火锅料理",pic:"http://localhost:8080/imgs/index/a1.png",descp:"",price:18},
        {id:2,title:"蔬菜水果",pic:'http://localhost:8080/imgs/index/a2.png',descp:"",price:28},
        {id:3,title:"火锅料理",pic:'http://localhost:8080/imgs/index/a3.png',descp:"",price:15},
        {id:4,title:"火锅料理",pic:'http://localhost:8080/imgs/index/a4.png',descp:"",price:19},
        {id:5,title:"火锅料理",pic:'http://localhost:8080/imgs/index/a5.png',descp:"",price:38},
        {id:6,title:"火锅料理",pic:'http://localhost:8080/imgs/index/a6.png',descp:"",price:28},
        {id:7,title:"火锅料理",pic:'http://localhost:8080/imgs/index/a7.png',descp:"",price:10},
        {id:8,title:"火锅料理",pic:'http://localhost:8080/imgs/index/a8.png',descp:"",price:18},
      ],
      active:"",
      value:0
    }
  },
  components:{
     [Tab.name]: Tab,
     [Tabs.name]: Tabs
     
  }
 
};
</script>
<style lang="less" scoped>
.g-header {
  height: 4rem;
  background: black;
  color: white;
  line-height: 4rem;
}
.m-search {
  height: 2rem;
  width: 13rem;
  .u-input {
    height: 2rem;
    width: 13rem;
    color: black;
    border-radius: 2rem;
    padding-left: 2rem;
    box-sizing: border-box;
    font-size: 0.8rem;
  }
}
.u-icon {
  font-size: 0.8rem;
}
.u-banner {
  width: 100%;
  height: 10rem;
}
.m-banner{
  height: 15rem;
}
.list-img{
  span{
    font-size: 0.6rem;
  }
}
.van-card {
  font-size: 0.8rem;
  .van-card__thumb {
    width: 30%;
  }
}
.icon {
  margin: 0 0.2rem;
}

</style>
